<template>
  <div style="height: 600px;overflow-y: auto;width: 500px">
    <Tree ref="CommonProvinceCityTree" :data="leftTree.syncData" :load-data="leftTree.aSyncData" @on-select-change="selectChange()"></Tree>
  </div>
</template>

<script>
import {getSubListByFid} from '@/api/data-dictionary/province_city'
import common_func from "@/libs/common_func";

export default {
  name: "CommonProvinceCityTree",
  props: [
    "is_show"
  ],
  watch: {
    deep: true,
    immediate: true,
    is_show(new_value, old_value) {
      if (new_value) {
        // 左侧树数据初始化
        getSubListByFid(0).then(res => {
          this.leftTree.syncData = common_func.DelNullChildren(res.data.data, 0)
          if (this.leftTree.syncData.length > 0) {
            this.cur_selected_item_obj.id = this.leftTree.syncData[0].id
            this.cur_selected_item_obj.title = this.leftTree.syncData[0].title
          }
        }).catch(res => {
        })
      }
    }
  },
  data() {
    return {

      cur_selected_item_obj: {
        id: -1,
        title: "",
        selected: false
      },
      // 定义左侧的树形组件参数
      leftTree: {
        syncData: [],
        aSyncData(item, callback) {
          getSubListByFid(item.id).then(res => {
            callback(common_func.DelNullChildren(res.data.data, 0))
          }).catch(res => {
          })
        }
      }
    }

  },
  methods: {
    selectChange() {
      let data = this.$refs.CommonProvinceCityTree.getSelectedNodes()
      if (data.length !== 0) {
        this.cur_selected_item_obj.id = data[0].id
        this.cur_selected_item_obj.title = data[0].title
        this.cur_selected_item_obj.selected = true
      } else {
        this.cur_selected_item_obj.id = -1
        this.cur_selected_item_obj.title = ""
        this.cur_selected_item_obj.selected = false
      }
    }
  }
}
</script>

<style scoped>

</style>
